<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 编码 -->
    <meta charset="UTF-8">
    <!-- 关键词 -->
    <meta name="Keywords" content="canvas">
    <!-- 描述 -->
    <meta name="Description" content="五子棋">
    <title>五子棋</title>

    <style>
        /*解决浏览器兼容问题*/
        * {
            margin: 0;
        }

        canvas {
            background: white;
            margin: 100px auto;
            display: block;
            border-radius: 4px; /* 边角 */
            box-shadow: 0 0 4px #000; /* 阴影 */
        }
    </style>
</head>
<body>
    <!--    canvas是行内元素-->
    <canvas id="canvas" height="450px" width="450px"></canvas>

    <script>
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        // 线条颜色
        ctx.strokeStyle="#a8a8a8";
        drawChessBoard();
        // drawChess(3,5,true);
        // drawChess(2,5,true);
        // 执棋人
        var me = true;
        var over = false;// 是否结束

        // 黑棋
        var black = [];
        // 白棋
        var white = [];

        // 赢的方式
        var count = 0;
        var wins = [];
        successWay();

        // 存储棋盘的棋子位置
        var chessBoard = [];
        // 进行初始化
        for(var i = 0;i<15;i++){
            chessBoard[i] = [];
            for(var j = 0;j<15;j++){
                chessBoard[i][j] = 0;
            }
        }

        // 点击事件
        canvas.onclick = function(e){
            if(over){
                return;
            }
            // 按照整个屏幕的计算
            console.log(e.clientX);
            // 按照棋盘计算
            console.log(e.offsetX);

            var x = e.offsetX;
            var y = e.offsetY;
            x = Math.round((x-15)/30);
            y = Math.round((y-15)/30);
            var isDraw = drawChess(x,y,me);
            // 下棋成功才会更换执棋人
            if(isDraw){
                // true为黑子
                if(me){
                    for(var k = 0;k<count;k++){
                        if(wins[x][y][k]){
                            if(black[k] === undefined){
                                black[k] = 0;
                            }
                            console.log("黑子"+k+"-------"+black[k])
                            black[k]++;
                        }
                        if(black[k] === 5){
                            alert("黑方胜");
                            over = true;
                            return;
                        }
                    }
                } else {
                    for(var k = 0;k<count;k++){
                        if(wins[x][y][k]){
                            if(white[k] === undefined){
                                white[k] = 0;
                            }
                            white[k]++;
                        }
                        if(white[k] === 5){
                            alert("白方胜");
                            over = true;
                            return;
                        }
                    }
                }

                console.log("下棋成功")
                me = !me;
            }

        }


        // 绘制棋盘
        function drawChessBoard() {
            // 线条
            for(var i = 0;i<15;i++){
                ctx.moveTo(15+30*i,15);
                ctx.lineTo(15+30*i,435);
                ctx.stroke();

                ctx.moveTo(15,15+30*i);
                ctx.lineTo(435,15+30*i);
                ctx.stroke();
            }
        }

        /**
         * 画棋子
         * @param x x轴
         * @param y y轴
         * @param me 谁执棋
         */
        function drawChess(x,y,me) {

            // 等于0表示还未落子
            if(chessBoard[x][y] === 0){
                // 2表示黑棋  1表示白棋
                if(me){
                    chessBoard[x][y] = 2;
                } else {
                    chessBoard[x][y] = 1;
                }
                // 开始路径
                ctx.beginPath();
                // 棋子 画圆 圆心  半径
                ctx.arc(15+30*x,15+30*y,13,0,Math.PI*2);
                // 结束路径
                ctx.closePath();
                ctx.stroke();
                // 渐变色
                var gradient = ctx.createRadialGradient(15+30*x,15+30*y,0,15+30*x,15+30*y,13);
                if(me){
                    // 设置填充色
                    gradient.addColorStop(0,"#0a0a0a");
                    gradient.addColorStop(1,"#636363");
                    // ctx.fillStyle = "#fff";
                } else {
                    gradient.addColorStop(0,"#d1d1d1");
                    gradient.addColorStop(1,"#f9f9f9");
                    // ctx.fillStyle = "#000";
                }
                ctx.fillStyle = gradient;
                ctx.fill();
                return true;
            } else {
                return false;
            }

        }

        // 计算赢方
        function successWay(){
            // 初始化数组
            for(var x = 0;x<15;x++){
                wins[x] = [];
                for(var y = 0;y<15;y++){
                    wins[x][y] = [];
                }
            }
            // 横线
            for(var x = 0;x<11;x++){
                for(var y = 0;y<15;y++){
                    // 五子连接胜利
                    for(var off = 0; off<5;off++){
                        wins[x+off][y][count] = true;
                    }
                    count++;
                }
            }

            // 竖线
            for(var x = 0;x<15;x++){
                for(var y = 0;y<11;y++){
                    for(var off = 0; off<5;off++){
                        wins[x][y+off][count] = true;
                    }
                    count++;
                }
            }

            // 斜线
            for(var x = 0;x<11;x++){
                for(var y = 0;y<11;y++){
                    for(var off = 0; off<5;off++){
                        wins[x+off][y+off][count] = true;
                    }
                    count++;
                }
            }

            // 反斜线
            for(var x = 14;x>3;x--){
                for(var y = 0;y<11;y++){
                    for(var off = 0; off<5;off++){

                        wins[x-off][y+off][count] = true;
                    }
                    count++;
                }
            }
            console.log("赢法一共"+count+"种");
        }



    </script>
</body>
</html>